<template>
  <view class="t-avatar" :style="{ width: sizePx, height: sizePx }">
    <image
      :src="image"
      mode="aspectFill"
      :style="{ width: sizePx, height: sizePx, borderRadius: radiusPx }"
    />
  </view>
</template>

<script setup>
import { computed } from "vue";

/**
 * TDesign Avatar 精简版
 * - 支持 image、size 两个主要属性
 */
const props = defineProps({
  image: { type: String, default: "" },
  size: { type: [Number, String], default: 48 },
});

/**
 * 计算像素尺寸字符串
 */
const sizePx = computed(() =>
  typeof props.size === "number" ? `${props.size}rpx` : props.size
);
const radiusPx = computed(() =>
  typeof props.size === "number" ? `${props.size / 2}rpx` : "50%"
);
</script>

<style>
.t-avatar {
  overflow: hidden;
}
</style>
